<template>
  <div>
    <van-area
      :title="title_name"
      :area-list="areaList"
      visible-item-count="8"
      @change="changeItemFn"
      @cancel="cancelFn"
      @confirm="selectCityBtn"
    />
  </div>
</template>
<script>
import area from "../assets/area";
export default {
  name: "selectCity",
  data() {
    return {
      areaList: area,
      title_name: "选择地区",
    };
  },
  methods: {
    changeItemFn(_d) {
      let data = _d.getValues();
      this.title_name = data[0].name + "-" + data[1].name + "-" + data[2].name;
    },
    cancelFn() {
      this.$emit("closeBlock");
    },
    selectCityBtn(_d) {
      this.$emit("closeBlock", _d[1].name);
    },
  },
};
</script>